<template>

  <el-row :style="{'margin':'3%','justify-content':'center'}">
    <el-upload
        class="avatar-uploader"
        action="http://localhost:8080/api/user/avatar"
        :headers="headers"
        :show-file-list="false"
        name="file"
        :on-success="handleAvatarSuccess"
    >
      <el-avatar v-if="user.avatar" :size="92" :src="user.avatar" class="avatar"></el-avatar>
      <el-icon v-else class="avatar-uploader-icon">
        <plus/>
      </el-icon>
    </el-upload>
  </el-row>

  <el-row :style="{'margin':'3%','justify-content':'center'}">
    <strong>{{ user.nickname }}</strong>
  </el-row>
  <el-divider/>
  <el-row :style="{'justify-content':'right!important'}">
    <el-button circle @click.prevent="changeBaseInfo()">
      <el-icon :size="16">
        <edit></edit>
      </el-icon>
    </el-button>
  </el-row>
  <el-row :gutter="20" :style="{'margin':'3%'}">
    <el-col :span="8">用户昵称</el-col>
    <el-col :span="16" v-if="showEdit">
      <el-input type="text" v-model="baseInfo.nickname"></el-input>
    </el-col>
    <el-col :span="16" v-else>
      {{ user.nickname }}
    </el-col>
  </el-row>
  <el-row :gutter="20" :style="{'margin':'3%'}">
    <el-col :span="8">手机号</el-col>
    <el-col :span="16">
      {{ user.phone }}
    </el-col>
  </el-row>
  <el-row :gutter="20" :style="{'margin':'3%'}">
    <el-col :span="8">邮箱地址</el-col>
    <el-col :span="16">
      {{ user.email }}
    </el-col>
  </el-row>
  <el-row :gutter="20" :style="{'margin':'3%'}">
    <el-col :span="8">个人简介</el-col>
    <el-col :span="16" v-if="showEdit">
      <el-input type="textarea" v-model="baseInfo.description"></el-input>
    </el-col>
    <el-col :span="16" v-else>
      {{ user.description }}
    </el-col>
  </el-row>
  <el-row :style="{'margin':'3%','text-align':'right','justify-content':'right!important'}" v-if="showEdit">
    <el-button type="primary" @click.prevent="updateUserInfo">修改</el-button>
  </el-row>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { Edit } from '@element-plus/icons'
import { updateUser } from '@/api/user'

export default defineComponent({
  name: 'BaseData',
  components: { Edit },
  setup () {
    const store = useStore()
    const user = ref(store.getters.getUser)
    const baseInfo = reactive({
      nickname: '',
      description: ''
    })
    const handleAvatarSuccess = (res, file) => {
      if (res.code === 0) {
        location.reload()
      }
    }
    const showEdit = ref(false)
    const headers = reactive({
      Authorization: 'Bearer ' + localStorage.getItem('mkcsa-token')
    })
    const changeBaseInfo = () => {
      showEdit.value = !showEdit.value
      baseInfo.description = user.value.description
      baseInfo.nickname = user.value.nickname
    }
    const updateUserInfo = async () => {
      const userResp = await updateUser(baseInfo)
      if (userResp.status !== 200 || userResp.data.code !== 0) {
        return
      }
      location.reload()
    }
    return {
      user,
      handleAvatarSuccess,
      headers,
      showEdit,
      baseInfo,
      changeBaseInfo,
      updateUserInfo
    }
  }
})
</script>

<style scoped>

</style>
